<template>
	<view class="xuanzeweizhi">
		<view class="search" >
		    <view class="searchContent">
		        <view class="searchCity" @click="handleCity">
		            <view class="picker">
		                {{city}}
		                <image src="http://cbchuxing.oss-cn-hangzhou.aliyuncs.com/webStorage/web_16479503792627233.png"></image>
		            </view>
		        </view>
		        <view class="searchXian"></view>
		        <input v-model="content" @input="handleInput" auto-focus placeholder="搜索地址"/>
			</view>
		</view>
		<view class="map">
			<map 
			  id="map"
			  :latitude="lat" 
			  :longitude="lon"
			  :scale="12"
			  show-location
			  layer-style="2"
			  subkey="565BZ-QWSCX-VJX4M-7LLQK-5PRJO-TIB6I"
			  @markertap="markerTap"
			  >
			</map>
		</view>
		<view class="address">
		    <view class="addressItem" v-for="(item,index) in addressList" :key="index" @click="handleAddress(item)">
		        <view class="addressItem-box">
		        	<image src="http://cbchuxing.oss-cn-hangzhou.aliyuncs.com/webStorage/web_16479518111351847.png"></image>
		        	<view class="addressItemContent">
		        	    <text class="addressItemContentText">{{item.title}}</text>
		        	    <text class="addressItemContentText1">{{item.address}}</text>
		        	</view>
		        </view>
				<view class="xian">
					
				</view>
		     </view>
		</view>
		<u-picker v-model="showCity" mode="region" :params="paramsCity" :default-region="regionList" @confirm="confirmCity" confirm-color="#D1BA7D" title="选择城市"></u-picker>
	</view>
</template>

<script>
	const QQMapWX = require('../../common/qqmap-wx-jssdk.js')
	const qqmapsdk = new QQMapWX({
	    key: '4FOBZ-LO2WK-EG3JV-AWWDD-OJQTT-R7BFB' // 必填
	})
	export default {
		data() {
			return {
				top:'',
				background: {
					backgroundColor: '#041031',
				},
				city:'',
				lat:'',
				lon:'',
				content:'',
				addressList:[],
				showCity:false,
				regionList:[],
				paramsCity:{
					province: true,
					city: true,
					area: true
				},
				share:uni.getStorageSync('share')
			}
		},
		onLoad() {
			this.regionList[0] = this.vuex_province
			this.regionList[1] = this.vuex_city
			this.regionList[2] = this.vuex_area
			this.city = this.vuex_city
			const headerTop = uni.getMenuButtonBoundingClientRect().top
			const headerHeight = uni.getMenuButtonBoundingClientRect().height
			this.top = (headerTop + headerHeight + 9)*2
			this.city = this.vuex_city
			this.lat = this.vuex_latLon.lat
			this.lon = this.vuex_latLon.lon
			this.getAddress()
		},
		methods: {
			//选择城市
			handleCity(){
				uni.hideTabBar()
				this.showCity = true
			},
			//确定城市
			confirmCity(e){
				console.log(e)
				this.regionList[0] = e.province.label
				this.regionList[1] = e.city.label
				this.regionList[2] = e.area.label
				this.showCity = false
				uni.showTabBar()
			},
			//搜索获取地址
			handleInput(e){
			    this.addressList = []
			    this.getInputAddress(e.detail.value)
			},
			//搜索地址
			getInputAddress(keyword){
			    var that = this
			    qqmapsdk.getSuggestion({
			        keyword: keyword,
			        region: that.city,
					page_size:20,
			        success(res){
			            console.log(res,"附近地点")
			            if(res.status == 0){
			                that.addressList = res.data
			                if (res.data.length > 0) {
						        that.lat = res.data[0].location.lat
							    that.lon = res.data[0].location.lng
			                }
			            }
			        }
			    })
			},
			//通过经纬度获取附近的位置
			getAddress() {
			    var _this = this;
			    qqmapsdk.reverseGeocoder({
			        location: {
			            latitude: _this.lat,
			            longitude: _this.lon
			        },
			        get_poi: 1, //是否返回周边POI列表：1.返回；0不返回(默认),非必须参数
			        success: function(res) {//成功后的回调
			            _this.addressList = res.result.pois
			        }
			    })
			},
			//选择位置
			handleAddress(data){
				uni.$emit('chooseAddress', data)
				uni.navigateBack({
					delta: 1
				})
			},
		},
		
	}
</script>
<style>
	page{
		background: white;
	}
</style>
<style scoped lang="scss">
    .search{
        position: fixed;
        left: 0px;
        z-index: 10;
        width: 100%;
        padding: 0px 0px 5px 0px;
		background: #ffffff;
    }
    .searchContent{
        margin: 0rpx 24rpx;
        padding: 10rpx 28rpx;
        box-sizing: border-box;
        background: #F5F7FB;
        color: #00AFFF;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
		
    }
    .searchCity{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .picker{
        display: flex;
        flex-direction: row;
        align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #515658;
		line-height: 32rpx;
    }
    .searchCity image{
        margin-left: 10rpx;
        width: 16rpx;
        height: 8rpx;
    }
    .searchXian{
        margin: 0px 14px;
        width: 2rpx;
        height: 32rpx;
        background: #EFF1F3;
    }
    .search input{
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #515658;
        line-height: 32rpx;
    }
    .map map{
    	width: 750rpx;
		height: 400rpx;
    }
    .address{
      margin: 0px 24rpx 40rpx 24rpx;
    }
    .addressItem{
      padding-top: 24rpx;
      
    }
	.addressItem-box{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.xian{
		margin-top: 24rpx;
		width: 100%;
		height: 0px;
		opacity: 0.2;
		border: 1rpx solid #EFF1F3;
	}
    .addressItem image{
      width: 18rpx;
      height: 24rpx;
    }
    .addressItemContent{
      margin-left: 18rpx;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .addressItemContentText{
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        line-height: 36rpx;
        color: #000000;
    }
    .addressItemContentText1{
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 36rpx;
        color: #666666;
    }
</style>
